<template>
  <div class="add-area">
    <el-button type="primary" @click="router.push('/pms/addProductCate')"
      >添加</el-button
    >
  </div>
  <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
    <el-table-column label="编号" prop="id" />
    <el-table-column label="分类名称" prop="name" />
    <el-table-column label="级别" prop="level" />
    <el-table-column label="商品数量" prop="productCount" />
    <el-table-column label="数量单位" prop="productUnit" />
    <el-table-column label="导航栏" prop="navStatus">
      <template #default="{ row }">
        <el-switch
          v-model="row.navStatus"
          :active-value="1"
          :inactive-value="0"
          @change=""
        />
      </template>
    </el-table-column>
    <el-table-column label="是否显示" prop="showStatus">
      <template #default="{ row }">
        <el-switch
          v-model="row.showStatus"
          :active-value="1"
          :inactive-value="0"
          @change=""
        />
      </template>
    </el-table-column>
    <el-table-column label="排序" prop="sort" />
    <el-table-column label="设置">
      <template #default="{ row }">
        <el-button @click="checkLower(row.id)">查看下级</el-button>
        <el-button @click="">移除商品</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          @click="router.push(`/pms/updateProductCate?id=${row.id}`)"
          v-permission="'allocRole'"
          >编辑</el-button
        >
        <el-button type="danger" @click="reomveProductCate(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { ElConfigProvider, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { getProductCateListApi, removeProductCateApi } from "./api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive } from "vue";

const router = useRouter();

const queryParams = reactive<IProductCateListParams>({
  pageNum: 1,
  pageSize: 10,
  parentId: 0,
});

const checkLower = (id: number) => {
  queryParams.parentId = id;
  ApiAgain();
};

const reomveProductCate = (id: number) => {
  ElMessageBox.confirm("确定要删除商品分类吗？", "删除商品分类", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      console.log(id);
      removeProductCateApi(id);
      router.go(0);
    })
    .catch(() => {
      console.log("取消");
    });
};

const {
  list,
  pageNum,
  pageSize,
  pageChangeHandle,
  pageSizeChangeHandle,
  ApiAgain,
  total,
} = useTable(getProductCateListApi, queryParams);
</script>
<style lang="less" scoped></style>
